<template>
    <div class="symptomlist">
        <Row>
            <Col :xs="24">
                <Button type="info" @click="add">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                </Button>
                <Input class="w-input" v-model="searchKey" clearable placeholder="角色名称"/>
                <Button type="primary" @click="loadPage(1)">
                    <Icon type="ios-search" size="14"/>
                </Button>
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="roleList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
			v-model="fundcode"
            :title = "title"
			:footer="null"
        >  	
            <div class="doctorreviewedit">
                <p class="title">基本信息</p>
                <Form ref="formInline" :model="info" :rules="infoRules" inline>
                    <Row class>
                        <Col class="borderRight">
                            <Row>
                                <Col :xs="24">
                                    <i class="req-icon">*</i>角色名称：
                                    <FormItem prop="roleName">
                                        <Input
                                            class="w-input"
                                            v-model="info.roleName"
                                            :maxlength="20"
                                            placeholder="请输入角色名称"
                                        />
                                    </FormItem>
                                </Col>
                                <Col :xs="24">
                                    <i class="req-icon"></i>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明：
                                    <FormItem prop="remark">
                                        <Input
                                            class="w-input"
                                            v-model="info.remark"
                                            type="textarea" 
                                            :rows="4"
                                            :maxlength="20"
                                            placeholder="请输入说明"
                                        />
                                    </FormItem>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Form> 
            </div>
            <div slot="footer" class="btn-group" style="text-align:center">
                <Button type="primary" @click="submit('formInline')" :disabled='disabledSave' style="width:75px;height:35px">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="fundcode = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
		</Modal>			
        <Modal
			v-model="modeltxt"
            title = "角色权限管理"
			:footer="null"
        >  	
            <div class="conbox">
                <Tree :data="data2" show-checkbox @on-check-change="selectItem"></Tree>
            </div>
            <div slot="footer" class="btn-group" style="text-align:center">
                <Button style="margin-right:10px;width:75px;height:35px" type="primary" @click="save" :disabled = "butmodel">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="modeltxt = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>	
            </div>			
		</Modal>			
    </div>
</template>
<script>
import api from "@/api/commonApi";
import { Tree } from "view-design";
export default {
    components: {
        Tree
    },
    data() {
        return {
            searchKey: "",
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "角色名称",
                    key: "roleName",
                    align: "center",
                    // width: 300
                },
                {
                    title: "说明",
                    key: "remark",
                    align: "center",
                    width: 300,
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.fundcode = true,
                                            this.title = '角色编辑'
                                            this.id = id
                                            this.$axios
                                                .post(api.findRoleById, { id: id })
                                                .then(resp => {
                                                    this.info = resp.data.object;
                                                })
                                                .catch(err => {
                                                    // this.$Message.info("服务器超时，请重新访问")
                                                });
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            " | ",
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#21c780',
                                    },
                                    on: {
                                        click: () => {
                                            this.deploy(id)
                                            this.modeltxt = true
                                        }
                                    }
                                },
                                "权限配置"
                            )
                        ];
                    }
                }
            ],
            roleList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: "",
            info: {
                roleName: "",
                remark: "3"
            },
            infoRules: {
                roleName: [
                    {
                        required: true,
                        message: "角色名称不能为空",
                        trigger: "change"
                    }
                ]
            },
            disabledSave: false,
            modeltxt: false,
            data2: [],
            selectData: [],
            roleId: '',
            butmodel: false
        };
    },
    created() {
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : "";
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/role/list",
                title: "角色管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = pageNo;
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.findRolePage, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        this.roleList = resp.data.object.records;
                        for (let i = 0; i < this.roleList.length; i++) {
                            let item = this.roleList[i];
                            this.roleList[i].iNum = i + 1;
                        }
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        add() {
            this.fundcode = true
            this.title = '角色新增'
            this.info.roleName = ''
            this.info.remark = ''
            this.id = ''
        },
        //提交
        submit(name) {
            this.disabledSave = true
            this.$refs[name].validate(valid => {
                if (valid) {
                    let operateApi = '';
                    let subMitObj = {};
                    let message = ''
                    if (this.id) {
                      operateApi = api.updateRole;
                      message = '修改成功'
                      subMitObj.id = parseInt(this.info.id);
                    } else {
                      operateApi = api.insertRole;
                      message = '添加成功'
                    }
                    subMitObj.roleName = this.info.roleName.trim();
                    subMitObj.remark = this.info.remark;
                    this.$axios
                        .post(operateApi, subMitObj)
                        .then(resp => {
                            console.log(resp);
                            if (resp.data.code == 1) {
                                this.$Message.success(message)
                                setTimeout(() => {
                                    //   公用方法
                                    this.disabledSave = false                                 
                                    this.loadPage(this.pageNo);
                                },1000)
                                this.fundcode = false
                            } else {
                                //   公用方法
                                this.disabledSave = false
                                this.$Message.error(resp.data.message);
                            }                           
                        })
                        .catch(err => {
                            console.log(err);
                            this.disabledSave = false
                        });
                } else {
                    this.$Message.error("请检查数据是否填写完整");
                    this.disabledSave = false
                }
            });
        },
        //账号权限配置-用户权限管理-全部菜单
        deploy(id){
            this.roleId = id;
            this.$axios
                .post(api.findRoleMenuByRoleId, {
                    roleId:this.roleId
                })
                .then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    let data = [];
                    //   循环
                    ret.forEach((item, index) => {
                        item.top.title = item.top.menuName;
                        item.top.expand = Boolean(item.top.iopen);
                        if (Boolean(item.top.iopen)) {
                            if(item.second) {
                                if (item.second.length == 0) {
                                    item.top.checked = true;
                                }
                            }
                        }
                        let a = item.top;
                        let children = [];
                        // 循环取到 二级菜单
                        if(item.second){
                            item.second.forEach((i, s) => {
                                i.second.title = i.second.menuName;
                                i.second.expand = Boolean(i.second.iopen);
                                if (Boolean(i.second.iopen)) {
                                    if (i.last.length && i.last.length == 0) {
                                        i.second.checked = Boolean(i.second.iopen);
                                    }
                                }
                                let child = [];
                                //   取到三级菜单
                                if(i.last){
                                    i.last.forEach((s, c) => {
                                        s.title = s.menuName;
                                        s.expand = Boolean(s.iopen);
                                        s.checked = Boolean(s.iopen);
                                        child.push(s);
                                        if (Boolean(s.iopen)) {
                                        }
                                    });
                                }
                                i.second.children = child;
                                children.push(i.second);
                                a.children = children;
                            }) 
                        } else {
                            item.top.checked = item.top.expand
                        }
                        data.push(a);
                    });
                    this.data2 = data;
                } else {
                    this.$Message.info("查询用户权限失败");
                }
            });
        },
        // 获取用户菜单
        selectItem(item) {
            this.selectData = item;
        },
        // 配置角色菜单权限
        save() {
            this.butmodel = true
            let menuIds = [];
            this.selectData.forEach(item => {
                menuIds.push(item.id);
            });
            // 主菜单
            this.data2.forEach(item => {
                if (!Boolean(item.children) && item.checked) {
                    menuIds.push(item.id);
                    return "";
                }
                // 二级菜单
                if(item.children) {
                    item.children.forEach(two => {
                        if(two.children) {
                            // 功能
                            two.children.forEach(free => {
                                if (free.checked) {
                                    menuIds.push(free.id);
                                    // 二级菜单id
                                    menuIds.push(two.id);
                                    // 主菜单id
                                    menuIds.push(item.id);
                                }
                            });
                        }
                    });
                }   
            });
          
            let a = new Set([...menuIds]);
            if (a.size === 0) {
                this.$Message.error("请至少选择一个功能");
                this.butmodel = false
                return
            } else 
            {
                this.$axios
                .post(api.saveRoleMenu, {
                    roleId: this.roleId,
                    menuIds: a
                })
                .then(res => {
                    if (res.data.code) {
                        this.$Message.info("修改成功");
                        this.modeltxt = false;     //关闭弹窗
                        this.butmodel = false
                    } else {
                        this.$Message.info(res.data.message);
                        this.butmodel = false
                    }
                })
            }
        },
    }
};
</script>
<style lang="less" scoped>
.symptomlist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 300px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.doctorreviewedit {
    width: 98%;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 20px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;         
    }
    .w-input {
        width: 300px;
    }
    .req-icon {
        font-size: 18px;
        color: red;
        display: inline-block;
        height: 18px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        vertical-align: middle;
        margin-left: 25px;
    }
}
.conbox {
    margin-left: 50px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>